<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>学生信息管理</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    </head>
    <body>
        <h1>学生信息管理</h1>
        <table id="tid" width="500" border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1001</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>20</td>
                    <td>web1013</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>李四</td>
                    <td>女</td>
                    <td>21</td>
                    <td>web1013</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>王五</td>
                    <td>男</td>
                    <td>22</td>
                    <td>web1013</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>20</td>
                    <td>web1013</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr> -->
            </tbody>
        </table>

        <br/><br/><br/>
        <h2>添加学生信息</h2>
        <form action="#" name="myform">
            姓名：<input type="text" name="name"/><br/><br/>
            性别：<input type="radio" name="sex" value="1"/>男 
                  <input type="radio" name="sex" value="0"/>女 <br/><br/>
            年龄：<input type="text" name="age"/><br/><br/>
            班级：<input type="text" name="classid"/><br/><br/>
            <input type="submit" value="添加"/>
        </form>

        <script>
            // 通过表单填写，点击添加按钮后，实现将表单中的数据添加到上面表格中。

            //设置默认的配置
            axios.defaults.method = 'get';
            axios.defaults.baseURL = 'http://localhost:3000';
            //axios.defaults.baseURL = 'http://127.0.0.1:6000';

            //1. 加载并渲染学员信息
            async function loadStu(){
                // 使用axios请求学生信息
                let {data} = await axios({url:"/stu"});
                // 获取页面中表格中的tbody节点
                const tbody = document.querySelector("#tid tbody");
                // 将里面的所有行清空
                tbody.innerHTML = "";
                // 遍历上面axios获取的学生信息
                data.forEach(stu => {
                    let tr = document.createElement("tr");
                    tr.innerHTML=`
                        <td>${stu.id}</td>
                        <td>${stu.name}</td>
                        <td>${stu.sex == 1? "男" : "女" }</td>
                        <td>${stu.age}</td>
                        <td>${stu.classid}</td>
                        <td><a href="javascript:;" onclick="doDel(${stu.id},this)">删除</a></td>
                    `;
                    // 将tr添加到tbody中
                    tbody.appendChild(tr);
                });
            }
            loadStu();

            // 执行信息删除操作
            async function doDel(id, nd){
                // 询问是否要删除
                if(confirm("确定要删除吗？")){
                    // 发送删除操作
                    try {
                        const res = await axios({method: "delete", url: "/stu/"+id });
                        // 到达此处表示删除成功
                        nd.parentNode.parentNode.remove();
                    } catch (error) {
                        console.log("请求删除失败！", error.message);
                    }
                    
                }
            }
        
            // 执行信息添加
            // 获取网页中的form表单节点, 并绑定表单提交事件
            const form = document.querySelector("form");
            form.onsubmit = function (){
                // 获取表单中表单项信息,并封装到一个数据对象中
                const stu = {};
                stu.name = form.name.value;
                stu.sex = form.sex.value;
                stu.age = form.age.value;
                stu.classid = form.classid.value;
                // 使用axios请求Ajax实现数据添加
                axios({
                    method: "post",
                    url: "/stu",
                    data: stu
                }).then(v => {
                    //console.log(v);
                    // 执行表单重置
                    form.reset();
                    loadStu(); // 重新加载学员信息
                }).catch(e => {
                    console.log("添加失败", e.message);
                });

                return false;
            }
        </script>
    </body>
</html>